<template>
  <div class="content">
    <el-row>
      <!-- 分类导航 -->
      <el-col :span="24" class="product">
        <el-card>
          <template #header>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{classify}}</el-breadcrumb-item>
            </el-breadcrumb>
          </template>
          <div class="el-row">
            <div class="el-col-5">
              <RankingList/>
            </div>
            <div class="el-col-19" v-if="ishav">
              <div class="product-top">
                <!-- <el-button-group>
                  <el-button>综合排名</el-button>
                  <el-button>销量</el-button>
                  <el-button>价格</el-button>
                </el-button-group> -->
              </div>
              <div class="context">
                <div v-for="item in list" :key="item.id">
                  <Goods :goods='item'></Goods>
                </div>
              </div>
            </div>
            <div v-else>
              非常抱歉没有找到您需要的商品
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import RankingList from "@/components/RankingList.vue";
import Goods from '@/components/Goods.vue';
import { computed } from '@vue/reactivity';
export default {
  name: "product_category",
  props:['data','classify','ishav'],
  setup(props) {
    let list = computed(() =>{
      return props.data
    })
    console.log(list);
    let currentPage4 = 4;
    return {
      list,
      currentPage4,
    };
  },
  components: { RankingList,Goods },
};
</script>
<style scoped>
.content {
  width: 1350px;
  margin: 0 auto;
}
/* 卡片距离上下 */
.product {
  padding: 10px 0;
}
.product-top {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>